<template>
    <div class="wrapper">
        <div class="inner" v-show="isShow" v-cloak>
            <div class="list" v-if="totalElements>0">
                <div class="unlock">
                    <div class="list-item" v-for="(item,index) in list" :key="index">
                        <span>{{item.lockTime | filterTime}}</span>
                        <span>{{item.lockCount}}</span>
                        <span @click="cancelLock(item.lockNumber)" v-if="unlockListType=='3'" :class="{'light':unlockListType=='3'}">取消解锁</span>
                        <span v-else>
                            <span v-show="item.lockState=='0'|| item.lockState=='1'">{{lockType=='0'?'锁定':'解锁'}}</span>{{item.lockStateValue}}
                        </span>
                    </div>
                </div>
                <div class="more" @click="loadmore" v-show="!lastPage">查看更多</div>
            </div>
            <PictureTips srcType="nolist" text="暂无数据" v-else></PictureTips>
        </div>
    </div>
</template>

<script>
import { MessageBox, Toast } from 'mint-ui';
import { GetUnlockList, PostCancelLock } from '@/api/api'
import PictureTips from "@/components/PictureTips/index.vue"
import { parseTime } from '@/utils/index'
export default {
    data: function () {
        return {
            isShow:false,
            pageSize:20,
            currentPage:1,
            lastPage:false,
            totalElements:0,
            list:[]
        }
    },
    props:{
        lockType:{
            type: String,
            default:"0"
        },
        unlockListType:{
            type: String,
            default:""
        }
    },
    mounted(){
        this.getUnlockList();
    },
    components:{
        PictureTips
    },
    filters:{
        filterTime:function(val){
            return parseTime(val)
        }
    },
    methods: {
        getUnlockList(){
            const data = {
                pageSize:this.pageSize,
                currentPages:this.currentPage,
                lockType:this.lockType
            }
            if( this.lockType == "1" ){
                data.unlockListType = this.unlockListType // 默认全部(不填)；0:完成，1:取消，2:未完成，3:解锁中; 
            }

            GetUnlockList(data).then(res => {
                if( res.code == 200 ){
                    
                    this.list = this.list.concat(res.data.dataList);
                    this.currentPage = res.data.currentPages;
                    this.lastPage = res.data.lastPage;
                    this.totalElements = res.data.totalElements

                    this.$nextTick(() => {
                        this.isShow = true;
                    })
                }
            })
        },
        cancelLock(number){
            MessageBox({
                title:'',
                message: '确定要取消解锁吗?',
                closeOnClickModal:true,
                showCancelButton:true,
            }).then(action => {
                if (action == 'confirm') {   //确认的回调
                    PostCancelLock({
                        lockNumber:number
                    }).then(res => {
                        if( res.code == 200 ){
                            Toast({
                                message: "取消解锁成功"
                            });

                            // 取消解锁成功后 刷新列表
                            this.list = [];
                            this.currentPage = 1;
                            this.getUnlockList();
                        }
                    })
                }else{
                    console.log('取消的回调'); 
                }
            });
        },
        loadmore(){
            this.currentPage++;
            this.getUnlockList();
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    padding-top:50px;
    height:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /*解决ios上滑动不流畅*/
    -webkit-overflow-scrolling: touch;
    .inner{
        .list{
            .unlock{
                .list-item{
                    height:50px;
                    line-height: 50px;
                    color:rgba(102,102,102,1);
                    border-bottom:1px solid #F4F5FA;
                    padding:0;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    span{
                        &:last-child{
                            width:60px;
                            text-align:right;
                        }
                        &.light{
                            color: #5f88ff;
                        }
                    }
                }
            }
            .more{
                color:#bfbfbf;
                text-align:center;
                margin-top:15px;
                margin-bottom:15px;
                font-size:12px;
            }
        }
    }
}
</style>
